<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Netty小说</title>
    <style>
    .text-word{
	/*border: 1px solid #aaa;*/
	height: 25px;
	width: 384px;
}

.text_list{
	height: 45px;
	/*border-bottom: 1px solid #d5cece;*/
}

.text-but{
	width: 70px;
	height: 30px;
	text-align:center;
	background-color: #57b4ec;
	border: 0px;
	cursor: pointer;
}
#sidemain{
	margin-top:10px;
	display:block;
}
.container{
	width: 155px;
	height: 466px;
	float: left;
	background:#bed9ee;
	margin-top: 101px;
}

.container  li{
list-style: none;
color:#000;
width: 155px;
height: 34px;
display: block;
font-size: 16px;
text-align: center;
border-bottom: 1px solid #fff;
}
    </style>
</head>
<body background="img/1000313.jpg"   style="font-size:16px;font-family: 'SimHei';background-size:cover;">
<script>
    var socket;
    if(window.WebSocket){
        socket = new WebSocket("ws://localhost:8000/test");

        socket.onmessage = function (event) {

            var ta = document.getElementById("responseText");
            ta.value = ta.value+"\n"+event.data;
        }

        socket.onopen = function(event){
            var ta = document.getElementById("responseText");
            ta.value="连接开启";
        }
        socket.onclose= function (event){
            var ta = document.getElementById("responseText");
            ta.value=ta.value+"\n"+"连接断开";
        }
    }else{
        alert("浏览器不支持WebSocket");
    }
    function send(message){
        if(!window.WebSocket){
            return;
        }
        if(socket.readyState == WebSocket.OPEN) {
            socket.send(message);
        }else{
            alert("连接尚未开启");
        }
    };
</script>
<form onsubmit="return false">
	<div class="container">
		<li style="font-weight:bold;">目录</li>
		<li>钢铁侠</li>
		<li>雷神</li>
		<li>美国队长</li>
		<li>奇异博士</li>
		<li>黑豹</li>
		<li>鹰眼</li>
		<li>绿巨人</li>
		<li>黑寡妇</li>
		<li>蜘蛛侠</li>
		<li>惊奇队长</li>
	</div>
<table width='85%' border='0' cellspacing='0'cellpadding='0' style='border-collapse:collapse'>
	<tr class="text_list">
		<td width="100%" align="left" valign="middle"  class="text_list">
			<form method="post" action="">
				  <textarea name="message" style="width:400px;height:50px"></textarea>
				  <input name="" type="button" value="搜索" class="text-but" onclick="send(this.form.message.value)">
			</form>
		</td>
	</tr>
	<tr>
		<tr><td><span style="line-height:45px;">小说阅读</span></td></tr>
		<td>
			<from id="sidemain" width="100%" style="border-collapse:collapse">
				<textarea id="responseText" style="width:532px; height:460px;"></textarea>
    			<input type="button" class="text-but"  onclick="javascript:document.getElementById('responseText').value=''" value="清空内容">
			</from>
		</td>
	</tr>
</table>
</form>
</body>
</html>